<template>
  <div class="custom-report">
    <!-- 引导 -->
    <div id="custom-report-guide"></div>
    <!-- 自定义头部 -->
    <div class="custom-report-header task-flex task-ai" v-if="reportType !== 'produce'"> 
      <div class="task-span1">
        <div class="task-flex">
          <i class="icon-bianji1 iconfont task-pointer" @click="$refs.reportName.show()" v-track="$track.formatParams('CHARTS_NAME_EDIT')"></i>
          <div class="task-ml12 task-pointer" @click="$refs.reportName.show()" v-track="$track.formatParams('CHARTS_NAME_EDIT')" >
            <h3>{{reportName.name || $t('report.customReportAggregate.unnamedReport')}}</h3>
            <span v-show="reportName.textarea" class="task-c8">{{$t('report.customReportAggregate.description')}}：{{reportName.textarea}}</span>
          </div>
        </div>
      </div>
      <base-button
        id="custom-report-submit"
        type="primary"
        native-type="submit"
        @event="reportCreate"
        v-track="$track.formatParams('SAVE_CHARTS')"
      >{{$t('report.customReportAggregate.saveReport')}}</base-button>
    </div>
    
    <!-- 生成自定义报表头部 -->
    <div class="custom-report-header task-flex task-ai" v-else> 
      <div class="task-flex task-pointer task-span1">
        <div>
          <h3>{{reportName.name}}</h3>
          <span>{{$t('report.customReportAggregate.description')}}：{{reportName.textarea}}</span>
        </div>
      </div>
      <base-button
        type="primary"
        native-type="submit"
        @event="editChares"
      >{{$t('report.customReportAggregate.editReport')}}</base-button>
      <base-button
        class="task-ml12 task-bjef"
        type="primary"
        native-type="submit"
        @event="delReport"
      >{{$t('report.customReportAggregate.delReport')}}</base-button>
    </div>

    <!-- 主内容 -->
    <div class="custom-report-content task-flex task-mt12">
      <!-- 左 -->
      <div class="task-span3" :class="{'task-mr12': reportType !== 'produce'}">
        <no-data-view-new v-if="!chartName && reportType !== 'produce'" :notice-msg="$t('report.customReportAggregate.pla1')"></no-data-view-new>
        <no-data-view-new v-else-if="chartList.length > 10 && chartName === $t('common.base.pieChart')" :notice-msg="$t('report.customReportAggregate.pla2')"></no-data-view-new>
        <chart :type="chartName" @checkDate="$refs.TaskSearchPanel.show()" v-else @taskTable="checkParam" :chart-list="chartList" :parasm="parasm" :sorts="sorts" :chart-satet="chartSatet" ref="chart" />
        <div id="no-data-view-new"></div>
      </div>
      <!-- 右 -->
      <div class="custom-report-content-right task-span1" v-if="reportType !== 'produce'">
        <h3 class="task-font16">{{ $t('report.customReportAggregate.setting1') }}</h3>
        <div id="custom-report-type">
          <div v-for="(v, index) in chartType" :key="index" class="custom-report-content-right-icon task-pointer" :class="{'active': chartName === v.name}" @click="checkChartType(v)">
            <div class="icon" :class="styles(v)"><i class="iconfont" :class="v.icon"></i></div>
            {{v.name}}
          </div>
        </div>
        <div class="clear" id="custom-report-condition">
          <h3 class="task-mtb13 task-font16" v-if="reportType === 'event' || reportType === 'task'">{{$t('report.customReportAggregate.setting2')}}</h3>
          <div class="" v-if="reportType === 'event' || reportType === 'task'">
            <div class="task-font14"><span class="task-cef">*</span>{{reportType === 'event' ? $t('common.label.eventType') : $t('common.label.taskTemplate')}}</div>
            <el-select v-model="taskType" :placeholder="$t('report.taskSelect.placeholder1')" class="task-mt8 w100" @change="taskSearc()">
              <el-option
                v-for="item in taskTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="task-mtb13">
            <div class="task-font14"><span class="task-cef">*</span>{{$t('report.customReportAggregate.setting3')}}</div>
            <el-select v-model="statisticType" :placeholder="$t('report.customReportAggregate.pla3')" class="task-mt8 w100" @change="statistic">
              <el-option
                v-for="(item,index) in statisticTypeList"
                :key="index"
                :label="item.value"
                :value="item.label">
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
    </div>

    <!-- components -->
    <!-- 报表名称 -->
    <add-name ref="reportName" @onSubmit="onSubmit" :report-name="reportName" />
    <!-- 数据搜索 -->
    <task-search-panel ref="TaskSearchPanel" :search-list="searchList" :report-type="reportType" :chart-satet="chartSatet" :task-from="taskFrom">
      <div
        class="advanced-search-btn-group task-flex task-buttom"
        slot="footer"
      >
        <div class="task-span1"></div>
        <base-button type="ghost" @event="resetParams">{{$t('common.base.reset')}}</base-button>
        <base-button
          type="primary"
          native-type="submit"
          @event="advancedSearch"
        >{{$t('common.base.save')}}</base-button
        >
      </div>
    </task-search-panel>
  </div>
</template>

<script>
import CustomReport from './customReport'
export default CustomReport
</script>

<style lang="scss" scoped>
.custom-report {
    padding: 12px 12px 0 0;
    &-header {    
        padding: 12px;
        background: #FAFAFA;
        box-shadow: 0px 2px 12px 0px rgba(50, 51, 51, 0.12);
        border-radius: 4px;
    }
    &-content {
        &-right {
            padding: 12px;
            width: 292px;
            background-color: #FAFAFA;
            border-radius: 4px 4px 0 0;
            padding-bottom: 100px;
            &-icon {
                display: inline-block;
                text-align: center;
                width: 47%;
                padding: 20px;
                border: 1px solid #D9D9D9;
                margin-bottom: 12px;
                &:nth-child(odd) {
                    margin-right: 12px;
                }
               .icon {
                    width: 40px;
                    height: 40px;
                    text-align: center;
                    line-height: 40px;
                    color: #fff;
                    border-radius: 4px;
                    margin-bottom: 12px;
                    margin: 12px auto;
               }
            }
            .active{
                background-color: #E6FFFB;
                border: 1px solid $color-primary-light-6;
            }
        }
    }
}
.advanced-search-btn-group {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    position: absolute;
    bottom: 0px;
    background: #fff;
    padding: 15px 0;

    .base-button {
    margin: 0 10px;
    }
}
.clear{
    clear: both;
}
.w100{
    width: 100%;
}
#custom-report-type {
  // height: 55%;
}
#custom-report-type, #custom-report-condition{
  width: 100%;
  background-color: #FAFAFA;
}

.custom-report-content-right > .guide-point {
  margin-top: 30px;
}
</style>